<template>
    <!-- 知识产权概况图表 -->
    <div style="display: flex; justify-content: space-around;height: 300px;">
        <!-- 第一个图表：发明专利 -->
        <div ref="chartContainer1" style="width: 200px; height: 250px;"></div>

        <!-- 第二个图表：软件著作权和实用新型 -->
        <div ref="chartContainer2" style="width: 200px; height: 250px;"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

// 创建图表容器的引用
const chartContainer1 = ref<HTMLDivElement | null>(null);
const chartContainer2 = ref<HTMLDivElement | null>(null);

// 初始化图表
const initChart = (container: HTMLDivElement | null, title: string, data: any[]) => {
    if (container) {
        const myChart = echarts.init(container);

        const option = {
            title: {
                text: title,
                left: 'center',
                top: 'center',
                textStyle: {
                    fontSize: 14,
                    fontWeight: 'bold',
                },
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}', // 只显示名称，去掉数值和百分比
            },
            legend: {
                show: false, // 隐藏图例
            },
            series: [
                {
                    name: '专利',
                    type: 'pie',
                    radius: ['50%', '70%'], // 定义环形的内外半径
                    avoidLabelOverlap: false,
                    label: {
                        show: false, // 不显示标签的数值
                        position: 'outside',
                    },
                    labelLine: {
                        show: true, // 显示连接线
                    },
                    data: data,
                },
            ],
            graphic: {
                elements: [
                    {
                        type: 'text',
                        left: 'center',
                        top: 'center',
                        style: {
                            textAlign: 'center',
                            font: '14px Arial', // 字体更大
                            fill: '#333',
                            text: title,  // 在中间显示 I类 或 II类
                        },
                    },
                ],
            },
        };

        // 使用指定的配置项和数据显示图表
        myChart.setOption(option);
    }
};

onMounted(() => {
    // 图表 1的数据：发明专利
    const data1 = [
        { value: 100, name: '发明专利100%' },
        { value: 0, name: '发明专利' },
    ];

    // 图表 2的数据：软件著作权和实用新型
    const data2 = [
        { value: 30, name: '实用新型11.11%' },
        { value: 70, name: '软件著作权89.89%' },
    ];

    // 初始化两个图表
    initChart(chartContainer1.value, 'I类', data1);
    initChart(chartContainer2.value, 'II类', data2);
});
</script>

<style scoped>
#chartContainer {
    position: relative;
}
</style>
